<template>
  <view class="header-top">
    <view class="header-inner">
      <view class="name">
        <view class="headImg"></view>
        {{ name }}
      </view>
      <view class="logOut">
        <view class="logOutInner" @click="logOutHandle" >登出</view>
      </view>
    </view>
    <view class="log-box">
      <u-modal :show="logOutShow" @confirm="confirm" @cancel="cancel" ref="uModal" confirmColor='#00796B' :showCancelButton='true' :asyncClose="true" width='260px'>
        <view style="font-size: 20px;padding: 20px 0;display: flex;align-items: center;">
          <text class="icon iconfont icon-tixing" style="font-size: 24px;padding-right: 4px;"></text>
          请确认是否退出？
        </view>
      </u-modal>
    </view>
    <quick-message ref="message"></quick-message>
  </view>
</template>
<script>
export default {
  props: ['name'],
  data(){
    return{
      logOutShow: false,
    }
  },
  methods:{
    logOutHandle(){
      this.logOutShow = true
    },
    confirm(){
      this.$refs.message.show({
        type:'success', //String 默认default
        msg:'登出成功', //String 显示内容 *
        direction:'top', //String 默认顶部显示
        icon:true, //Boolean|String 显示icon(false/true/string 默认显示icon)
        mask:true, //Boolean 遮罩（默认false没有遮罩）
        time:1000, //Number|Boolean 默认3000/false为不自动关闭
        customStyle:{ //自定义样式
          // color:'#FFFFFF', //字体图标色
          // backgroundColor:'rgba(0,0,0,.5)', //背景色
          fontSize: 12,
        }, 
        iconSize: 16, //Number 自定义icon大小(单位px 默认16 设置后会覆盖自定义样式里的设置优先级最高)
        iconColor: '', //String icon颜色(默认主题颜色 设置后会覆盖自定义样式里的设置优先级最高)
      })
      this.logOutShow = false
      this.$emit('stopInterval')
      setTimeout(() => {
        uni.removeStorageSync('phone_token')
        uni.reLaunch({
          url: '/pages/login/login'
        })
      }, 1000);
    },
    cancel(){
      this.logOutShow = false
    }
  }
}
</script>
<style lang='scss'>
.header-top{
  padding-top: 20rpx;
  height: 60rpx;
  width: 100%;
  box-sizing: border-box;
  background-image: radial-gradient(transparent 1px, #ffffff 1px);
  background-size: 4px 4px;
  backdrop-filter: saturate(50%) blur(10px);
  -webkit-backdrop-filter: saturate(50%) blur(4px);
  border-radius: 0 0 20rpx 20rpx;
  z-index: 10;
  position: fixed;
  top: 0;
  left: 0;
  .header-inner{
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 0 0 20rpx 20rpx;
    font-size: 16px;
    border-bottom: 2px solid rgba(0,0,0,0.1);
    box-shadow: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    .name{
      display: flex;
      align-items: center;
      .headImg{
        height: 31rpx;
        width: 31rpx;
        border-radius: 100%;
        background: #F2FCFC;
        margin-right: 10rpx;
        background-image: url('@/static/img/head.png');
        background-size: 100% 100%;
      }
      font-weight: 500;
    }
    .logOut{
      color: $u-primary;
      font-weight: 500;
      .logOutInner{
        padding: 4rpx 20rpx;
        border: 1px solid $u-primary;
        border-radius: 100rpx;
      }
    }
  }
}
.log-box{
  .u-popup{
    height: 100vh !important;
    :deep(.u-fade-enter-active) {
      position: fixed !important;
      inset: 0px !important;
      z-index: 1000 !important;
      background-color: rgba(0, 0, 0, 0.5) !important;
      height: 100vh !important;
      bottom: 0 !important;
      
    }
    .iconfont{
      color: $u-error;
    }
  }
  :deep(.u-popup__content){
    bottom: -50vh !important;
    position: absolute !important;
  }
}
</style>